<template>
  <div class="tourist_box">
    <div class="title">
      <p style="font-size: 20px; color: white">实时游客统计</p>
      <img src="../images/dataScreen-title.png" />
    </div>
    <div class="content_count">
      <span class="total" v-for="(item, index) in people" :key="index">{{ item }}</span>
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, onMounted, useTemplateRef } from 'vue'
import * as echarts from 'echarts'
import 'echarts-liquidfill'
let people = ref('202506人')
let charts = useTemplateRef('charts')
onMounted(() => {
  let mycharts = echarts.init(charts.value)
  mycharts.setOption({
    renderer: 'canvas',
    lazyUpdate: true,
    series: [
      {
        type: 'liquidFill',
        data: [
          {
            value: 0.48,
            direction: 'left',
          },
          0.38,
        ],
        waveAnimation: true, //动画
        animationDuration: 3,
        animationDurationUpdate: 0,
        radius: '75%',
        backgroundStyle: {
          color: 'rgba(0, 0, 0, 0)',
          borderWidth: 2,
          borderColor: 'rgba(100, 200, 255, 0.5)',
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(0, 200, 255, 0.8)',
              },
              {
                offset: 1,
                color: 'rgba(0, 180, 150, 0.8)',
              },
            ],
          },
        ],
        outline: {
          itemStyle: {
            borderColor: 'rgba(0, 200, 255, 0.7)',
            shadowColor: 'rgba(0, 200, 255, 0.5)',
          },
        },
        itemStyle: {
          shadowColor: 'rgba(0, 220, 180, 0.4)',
        },
        emphasis: {
          itemStyle: {
            opacity: 0.9,
          },
        },
        label: {
          formatter: function () {
            return '48%\n{blue|预约人数}'
          },
          rich: {
            blue: {
              color: '#a0f0ff',
              fontSize: 18,
              lineHeight: 30,
            },
          },
        },
      },
    ],
  })
})
</script>
<style scoped lang="scss">
.tourist_box {
  background: url(../images/dataScreen-main-lb.png) no-repeat;
  background-size: 100% 100%;
  margin: 10px 0px;

  .content_count {
    display: flex;
    padding: 0 10px;
    margin-top: 30px;
    .total {
      display: inline-block;
      flex: 1;
      height: 50px;
      margin: 0 12px;
      background: url(../images/total.png) no-repeat;
      background-size: cover;
      font-size: 24px;
      color: white;
      line-height: 50px;
      text-align: center;
    }
  }
  .charts {
    width: 100%;
    height: 270px;
  }
}
</style>
